<template>
  <div class="landing-page">
    <div class="hero-section">
      <h1>Move fast to that <span class="highlight">200 OK</span></h1>
      <p class="subtitle">
        Transform API development from an individual to a team sport. Get to that
        first API call faster, improve developer onboarding, and increase API
        discoverability.
      </p>
    </div>

    <div class="content-wrapper">
      <div class="image-section">
        <div class="image-placeholder">
          <img src="imgs/4.png" alt="API interface"/>
        </div>
      </div>

      <div class="features-section">
        <div
            v-for="(feature, index) in features"
            :key="index"
            class="feature-card"
            :class="{ expanded: expandedIndex === index }"
        >
          <div class="feature-header" @click="toggleFeature(index)">
            <h2>{{ feature.title }}</h2>
            <button class="toggle-btn">{{ expandedIndex === index ? '−' : '+' }}</button>
          </div>
          <div class="feature-content" v-show="expandedIndex === index">
            <p>{{ feature.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LandingPage',
  data() {
    return {
      expandedIndex: 0,
      features: [
        {
          title: "Execute, test, and interact with APIs in seconds",
          content: "Open and extensible by design, collections in Postman expedite self-serve API consumption across the org, so devs can start testing APIs and building workflows."
        },
        {
          title: "Reduce duplication of work for your teams",
          content: "Streamline your workflow and avoid redundant efforts. Our platform enables efficient collaboration, ensuring your teams can share knowledge and resources effectively."
        },
        {
          title: "Faster time to first API call",
          content: "Get up and running quickly with intuitive tools and comprehensive documentation. Reduce the learning curve and start making API calls faster than ever before."
        }
      ]
    };
  },
  methods: {
    toggleFeature(index) {
      this.expandedIndex = this.expandedIndex === index ? null : index;
    }
  }
}
</script>

<style scoped>
.landing-page {
  padding: 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.hero-section {
  margin-bottom: 40px;
}

h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.highlight {
  color: #2E8B57;
}

.subtitle {
  font-size: 20px;
  color: #333;
  max-width: 800px;
  line-height: 1.5;
}

.content-wrapper {
  display: flex;
  gap: 40px;
}

.image-section {
  flex: 2;
}

.image-placeholder {
  background-color: #f5f5f5;
  border: 2px dashed #ddd;
  border-radius: 8px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.features-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-card {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
}

.feature-header:hover {
  color: #2E8B57;
}

.feature-header h2 {
  font-size: 34px;
  font-weight: bold;
  margin: 0;
}

.toggle-btn {
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.feature-header:hover .toggle-btn {
  border-color: #2E8B57;
  color: #2E8B57;
}

.feature-content {
  margin-top: 20px;
  line-height: 1.6;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.expanded .feature-content {
  opacity: 1;
  max-height: 200px;
}

.expanded {
  margin-bottom: 20px;
}
</style>